// 柱形图
<template>
  <div>
    <div id="myBarChart"></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  // 获取DOM元素并且进行初始化
  var myBarChart = echarts.init(document.getElementById('myBarChart'))
  // 创建图标
  myBarChart.setOption({
    title: {
      text: '仓库出库量占比'
    },
    tooltip: {},
    xAxis: {
      data: ['仓库01', '仓库02', '仓库03', '仓库04', '仓库05', '仓库06', '仓库07', '仓库08'],
      axisLabel: {
        textStyle: {
          show: true,
          fontFamily: '微软雅黑',
          color: '#000',
          fontSize: '8'
        }
      }
    },
    yAxis: {
      axisLabel: {
        textStyle: {
          show: true,
          fontFamily: '微软雅黑',
          color: '#000',
          fontSize: '8'
        }
      }
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        itemStyle: { color: '#007761' },
        data: [125, 220, 346, 3710, 810, 520, 1000, 2109]
      }
    ]
  })
})
</script>
<style scoped>
#myBarChart {
  width: 100%;
  height: 300px;
}
</style>
